<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/css/bootstrap.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/order.css">
    <script src="../lib/jquery/jQuery.js"></script>
    <script src="../lib/js/bootstrap.js"></script>
    <script src="../js/index.js"></script>
    <title>首页</title>
</head>

<body>
    <!-- 大屏状态下nav -->
    <div class="huge hidden-sm hidden-xs">
        <div id="topbar">
            <div class="container">
                <div class="l">
                    <p>在线时间08:30-21:30</p>
                    <p>欢迎访问家电在线商城</p>
                </div>
                <div class="r">
                    <a href="">登录</a>
                    <a href="">注册</a>
                    <a href="" class="cart"><i class="glyphicon glyphicon-shopping-cart"></i><span
                            class="badge">21</span>
                        <div class="shopcart">
                            <div class="blank"></div>
                            <div class="slt">
                                <div class="img"><img src="../media/g1.jpg" alt=""></div>
                                <div class="detail">
                                    <h5>X280笔记本电脑20KFA002CD</h5>
                                    <p>2 x 9999 ¥</p>
                                </div>
                                <span>X</span>
                            </div>
                            <div class="slt">
                                <div class="img"><img src="../media/g1.jpg" alt=""></div>
                                <div class="detail">
                                    <h5>X280笔记本电脑20KFA002CD</h5>
                                    <p>2 x 9999 ¥</p>
                                </div>
                                <span>X</span>
                            </div>
                            <div class="slt">
                                <div class="img"><img src="../media/g1.jpg" alt=""></div>
                                <div class="detail">
                                    <h5>X280笔记本电脑20KFA002CD</h5>
                                    <p>2 x 9999 ¥</p>
                                </div>
                                <span>X</span>
                            </div>
                            <h4>小计¥ 29999</h4>
                            <button class="look">查看购物车</button>
                            <button class="pay">结算</button>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <nav>
            <div class="container">
                <img src="../media/logo.png" alt="">
                <ul>
                    <li><a href="" class="active">首页</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">台式机</a></li>
                    <li><a href="">外设系列</a></li>
                    <li><a href="">评测中心</a></li>
                    <li><a href="">售后服务</a></li>
                </ul>
                <form action="">
                    <input type="text" placeholder="游戏笔记本">
                    <button type="submit">提交</button>
                </form>
            </div>
        </nav>
    </div>



    <!-- 小屏幕下nav -->
    <div class="lettle hidden-lg hidden-md">
        <div class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="btn"><i class="glyphicon glyphicon-align-justify"></i> </div>
                <div class="logo"><img src="../media/logo.png" alt="" width="110" class="img-responsive"></div>
                <div class="search"><i class="glyphicon glyphicon-search" data-toggle="modal" data-target="#search"></i>
                </div>
            </div>
            <!-- 左侧隐藏框 -->
            <div class="slideRight">
                <div class="s_head">
                    <!-- 未登录状态 -->
                    <!-- <a href="" class="login">登录</a>
                    <a href="" class="register">注册</a> -->
                    <!-- /未登陆状态 -->
                    <!-- 已登陆状态 -->
                    <a href="#" class="touxiang"><img src="../media/touxiang.jpg" width="50"
                            alt=""><span>欢迎渣渣灰欢迎渣渣灰欢迎渣渣灰</span> </a>
                    <a href="" class="has_cart"><i class="glyphicon glyphicon-shopping-cart"></i></a>
                    <!-- /已登陆状态 -->
                </div>
                <div class="s_logo"><img src="../media/logo.png" height="50" alt=""></div>
                <ul class="s_list">
                    <li><a href="">首页</a></li>
                    <li><a href="">我的购物车</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">台式机</a></li>
                    <li><a href="">外设系列</a></li>
                    <li><a href="">评测中心</a></li>
                    <li><a href="">售后服务</a></li>

                </ul>
            </div>
        </div>
    </div>
    <input type="hidden" name="" id="slider_num" value="2">



    <div class="fixnav hidden-sm hidden-xs">
        <div class="fix_tel"><i class="glyphicon glyphicon-earphone"></i>
            <p>18337252813</p>
        </div>
        <div class="bling"><i class="glyphicon glyphicon-bell"></i></div>
        <div class="reback"><i class="glyphicon glyphicon-upload"></i></div>
    </div>
    <!-- order_body -->
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-7">
                <div class="left">
                    <h4>账单地址</h4>
                    <h5>省市区 *</h5>
                    <form role="form">
                        <div class="form-group">
                            <select class="form-control sel">
                                <option>--- 选择省 ---</option>

                            </select>

                            <select class="form-control sel">
                                <option>--- 选择市 ---</option>

                            </select>
                            <select class="form-control sel">
                                <option>--- 选择区 ---</option>

                            </select>
                        </div><br>
                        <div class="form-group">
                            <label for="name">地址 *</label>
                            <input type="text" class="form-control" placeholder="文本输入">
                        </div>
                        <div class="form-group">
                            <label for="name">姓名*</label>
                            <input type="text" class="form-control" placeholder="文本输入">
                        </div>
                        <div class="row">

                            <div class="form-group col-lg-6 col-xs-6">
                                <label for="name">Email*</label>
                                <input type="text" class="form-control" placeholder="文本输入">
                            </div>
                            <div class="form-group col-lg-6  col-xs-6">
                                <label for="name">电话*</label>
                                <input type="text" class="form-control" placeholder="文本输入">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox">请记住我
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <h4>其他信息</h4>
                                    <label for="name">订单备注</label>
                                    <textarea class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-5 col-md-5">
                <div class="right">
                    <table class="table">
                            <thead>
                              <tr>
                                <th>商品</th>
                                <th>价钱</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                               
                                <td>ThinkPad T480 笔记本电脑 × 1</td>
                                <td>¥8999</td>
                              </tr>
                              <tr>
                                
                                <td>Mumbai</td>
                                <td>Bangalore</td>

                              </tr>
                              <tr>
                                  <td class="totall">订单总计</td>
                                  <td class="total_price">¥8999</td>
                              </tr>
                              
                            </tbody>
                          </table>
                          <label class="radio-inline">
                                <input type="radio" name="pay" id="pay" value="option1"> 支付宝 <img src="../media/alipay.png" alt="">
                            </label>
                            <div class="info">
                                    使用支付宝付款,目前只支持支付宝付款
                            </div>
                            <br>
                            <button class="sub" >到支付宝支付</button>
                        </div>

            </div>
        </div>
    </div>
    <!-- /order_body -->





    <footer>
        <div class="top hidden-sm hidden-xs">
            <div class="container">
                <dl>
                    <dd>三年免费保修</dd>
                    <dd>三年免费保修</dd>
                    <dd>三年免费保修</dd>
                    <dd>三年免费保修</dd>
                    <dd>三年免费保修</dd>
                </dl>
                <table class="table">

                    <thead>
                        <tr>
                            <th>帮助中心</th>
                            <th>服务支持</th>
                            <th>关于我们</th>
                            <th>新闻资讯</th>
                            <th>线下门店</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><a href="#">购物指南</a></td>
                            <td><a href="#">保修政策</a></td>
                            <td><a href="#">公司介绍</a></td>
                            <td><a href="#">营业执照</a></td>
                            <td><a href="#">法律申明</a></td>
                        </tr>
                        <tr>
                            <td><a href="#">支付方式</a></td>
                            <td><a href="#">服务标准</a></td>
                            <td><a href="#">加入我们</a></td>
                            <td><a href="#">新闻动态</a></td>
                            <td><a href="#">隐私政策</a></td>
                        </tr>
                        <tr>
                            <td><a href="#">配送方式</a></td>
                            <td><a href="#">退换货政策</a></td>
                            <td><a href="#">联系我们</a></td>
                            <td><a href="#">版权申明</a></td>
                            <td><a href="#">服务条款</a></td>
                        </tr>

                    </tbody>
                </table>

                <div class="contact">
                    <div class="wechat">
                        <p>微信公众号</p>
                        <img src="../media/wechat.jpg" alt="">
                    </div>
                    <div class="phone">
                        <h4>4006-999-999</h4>
                        <h6>周一至周日 8:00-18:00</h6>
                        <a href="#">24小时在线服务</a>
                    </div>
                </div>
            </div>

        </div>
        <div class="bottom">
            <div class="container">
                <p>版权所有2056-2086 数码家电在线商城模板 沪ICP备000000000号-0</p>
            </div>
        </div>
    </footer>



    <!-- /goods_body -->





    <!-- 模态框（Modal） -->
    <div class="modal fade" id="search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        搜索
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-addon glyphicon glyphicon-search"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- /模态框 -->
</body>

<script>
    $(function(){
        var pay = $('#pay');
        var info = $('.info');
        pay.click(function(){
            info.fadeToggle('slow')
        })


    })
</script>
</html>